<template>
  <div class="detail-wrapper">
    <div class="detail-main">
      <div class="detail-column">
        <div class="column-title">客户基础信息</div>
        <div class="column-content">
          <a-descriptions bordered :labelStyle="{ width: '120px' }" :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }">
            <a-descriptions-item label="经销商名称">
              {{ formState.name }}
            </a-descriptions-item>
            <a-descriptions-item label="经销商编号">
              {{ formState.no }}
              <img class="icon" src="/public/icons/common/icon-copy.png" alt="" @click="handleCopy(formState.no)" />
            </a-descriptions-item>
            <a-descriptions-item label="所在地区">
              {{ formState.cityName }}
            </a-descriptions-item>
            <a-descriptions-item label="详细地址">
              {{ formState.address }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">联系人信息</div>
        <div class="column-content">
          <a-descriptions bordered :labelStyle="{ width: '120px' }" :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }">
            <a-descriptions-item label="姓名">{{ formState.contact.name }}</a-descriptions-item>
            <a-descriptions-item label="职务">{{ formState.contact.duty }}</a-descriptions-item>
            <a-descriptions-item label="手机号">
              {{ seePhone ? formState.contact.mobile : maskPhone(formState.contact.mobile) }}
              <img class="icon" v-if="!seePhone" src="/public/icons/common/icon-see-close.png" alt=""
                @click="handleChangeSee(1)" />
              <img v-else class="icon" src="/public/icons/common/icon-see-open.png" alt=""
                @click="handleChangeSee(1)" />
            </a-descriptions-item>
            <a-descriptions-item label="联系电话">
              {{ seePhone2 ? formState.contact.tel : maskPhone(formState.contact.tel) }}
              <img v-if="!seePhone2" class="icon" src="/public/icons/common/icon-see-close.png" alt=""
                @click="handleChangeSee(2)" />
              <img v-else class="icon" src="/public/icons/common/icon-see-open.png" alt=""
                @click="handleChangeSee(2)" />
            </a-descriptions-item>
            <a-descriptions-item label="电子邮箱">
              {{ formState.contact.email }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">运维账号</div>
        <div class="column-content">
          <a-table class="table-box" row-key="index" :columns="columns1" :dataSource="tableData1" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)
            " sticky :scroll="{ y: true, x: 1100 }" :pagination="pagination1" @change="onChange1">
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex == 'operation'">
                <a-button type="link" class="link" @click="handleDetail1(record)">
                  查看
                </a-button>
              </template>
            </template>
          </a-table>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">关联订单</div>
        <div class="column-content">
          <a-table class="table-box" row-key="index" :columns="columns2" :dataSource="tableData2" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)
            " sticky :scroll="{ y: true, x: 1100 }" :pagination="pagination2" @change="onChange2">
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex == 'enabled'">
                <div class="cell-status-box" :class="{ 'is-active': record.enabled === 0 }">
                  <div class="status-dot"></div>
                  <div class="status-text">
                    {{ record.enabled ? "合作良好" : "异常" }}
                  </div>
                </div>
              </template>
              <template v-if="column.dataIndex == 'operation'">
                <a-button type="link" class="link" @click="handleDetail2(record)">
                  查看
                </a-button>
              </template>
            </template>
          </a-table>
        </div>
      </div>
    </div>
  </div>

  <!-- 详情对话框 -->
  <a-modal v-model:visible="detailModalVisible" title="账号详情" :footer="null" @cancel="handleCloseModal">
    <div class="modal-content">
      <a-descriptions bordered :labelStyle="{ width: '120px' }" :contentStyle="{ width: '300px' }"
        :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }">
        <a-descriptions-item label="姓名">{{ currentRecord.user_id }}</a-descriptions-item>
        <a-descriptions-item label="账号">{{ currentRecord.user_id }}</a-descriptions-item>
        <a-descriptions-item label="开通时间">{{ currentRecord.created }}</a-descriptions-item>
        <a-descriptions-item label="账号状态">{{ currentRecord.enabled ? '启用' : '禁用' }}</a-descriptions-item>
        <a-descriptions-item label="备注">{{ currentRecord.remark || '-' }}</a-descriptions-item>
      </a-descriptions>
    </div>
    <template #footer>
      <a-button @click="handleCloseModal">关闭</a-button>
    </template>
  </a-modal>

  <!-- 订单详情对话框 -->
  <a-modal v-model:visible="orderDetailModalVisible" title="订单详情" :footer="null" @cancel="handleCloseOrderModal">
    <div class="modal-content">
      <a-descriptions bordered :labelStyle="{ width: '140px' }" :contentStyle="{ width: '300px' }"
        :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }">
        <a-descriptions-item label="订单编号">{{ currentOrderRecord.order_id }}</a-descriptions-item>
        <a-descriptions-item label="客户名称">{{ currentOrderRecord.remark }}</a-descriptions-item>
        <a-descriptions-item label="客户编号">{{ currentOrderRecord.customer_id }}</a-descriptions-item>
        <a-descriptions-item label="订单状态">{{ currentOrderRecord.enabled ? '合作良好' : '异常' }}</a-descriptions-item>
        <a-descriptions-item label="订单生效日期">{{ currentOrderRecord.contract_begin_date }}</a-descriptions-item>
        <a-descriptions-item label="运维期限">{{ currentOrderRecord.contract_months }}个月</a-descriptions-item>
        <a-descriptions-item label="创建日期">{{ currentOrderRecord.created }}</a-descriptions-item>
      </a-descriptions>
    </div>
    <template #footer>
      <a-button @click="handleCloseOrderModal">关闭</a-button>
    </template>
  </a-modal>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import API from "@/api/operation";
import SAPI from "@/api/system";
import router from "@/routers";
import { useRoute } from "vue-router";
import { message } from "ant-design-vue";
import { getCityName } from "@/utils/city.ts";
import { maskPhone } from '@/utils/validate.ts'
const route = useRoute();
const query = computed(() => route.query);
const zoneoList = ref([]);
onMounted(async () => {
  await getZoneData();
  if (query.value.id) {
    getData();
    DealerUserPageList();
    OrderContractPagedList();
  }
});
const formState = ref({
  name: "",
  no: "",
  cityName: "",
  address: "",
  enabled: true,
  contact: {
    dealer_id: "",
    name: "",
    duty: "",
    mobile: "",
    tel: "",
    email: ""
  }
});
// 获取页面详情数据并还原
const getData = async () => {
  const res = await API.DealerFetchModel({
    dealer_id: query.value.id,
  });
  formState.value = {
    name: res.name,
    no: res.no,
    cityName: getCityName(zoneoList.value, res.city_id),
    address: res.address,
    enabled: res.enabled,
    contact: {
      name: res.dealer_contacts ? res.dealer_contacts.name : '',
      duty: res.dealer_contacts ? res.dealer_contacts.duty : '',
      mobile: res.dealer_contacts ? res.dealer_contacts.mobile : '',
      tel: res.dealer_contacts ? res.dealer_contacts.tel : '',
      email: res.dealer_contacts ? res.dealer_contacts.email : ''
    }
  };
};
// 获取地区数据
const getZoneData = async () => {
  const res = await SAPI.CityCityTree();
  zoneoList.value = res;
};
const seePhone = ref(false);
const seePhone2 = ref(false);

const handleCopy = async (text) => {
  try {
    await navigator.clipboard.writeText(text);
    message.success("复制成功");
  } catch (error) {
    message.error("复制失败");
  }
};
const handleChangeSee = (type) => {
  if (type === 1) {
    console.log("手机号");
    seePhone.value = !seePhone.value;
  } else if (type === 2) {
    console.log("联系电话");
    seePhone2.value = !seePhone2.value;
  }
};
const columns1 = ref([
  {
    dataIndex: "user_id",
    title: "姓名",
    width: 100,
  },
  {
    dataIndex: "user_id",
    title: "账号",
    width: 200,
    ellipsis: true,
  },
  {
    dataIndex: "created",
    title: "开通时间",
    width: 240,
  },
  {
    dataIndex: "enabled",
    title: "账号状态",
    width: 110,
  },
  {
    dataIndex: "remark",
    title: "备注",
  },
  {
    dataIndex: "operation",
    title: "操作",
    width: 120,
    align: "center",
    fixed: "right",
  },
]);
const columns2 = ref([
  {
    dataIndex: "order_id",
    title: "订单编号",
    width: 180,
  },
  {
    dataIndex: "remark",
    title: "客户名称",
    ellipsis: true,
  },
  {
    dataIndex: "customer_id",
    title: "客户编号",
    width: 180,
  },
  {
    dataIndex: "enabled",
    title: "订单状态",
    width: 110,
  },
  {
    dataIndex: "contract_begin_date",
    title: "订单生效日期",
    width: 200,
  },
  {
    dataIndex: "contract_months",
    title: "运维期限",
    width: 110,
  },
  {
    dataIndex: "created",
    title: "创建日期",
    width: 200,
  },
  {
    dataIndex: "operation",
    title: "操作",
    width: 120,
    align: "center",
    fixed: "right",
  },
]);
const tableData1 = ref([]);
const tableData2 = ref([]);
const pagination1 = ref({
  current: 1,
  pageSize: 5,
  total: tableData1.value.length,
});
const pagination2 = ref({
  current: 1,
  pageSize: 5,
  total: tableData2.value.length,
});
const onChange1 = (pagination) => {
  console.log(pagination);
};
const onChange2 = (pagination) => {
  console.log(pagination);
};
// 账号详情对话框状态
const detailModalVisible = ref(false);
const currentRecord = ref({});

// 打开账号详情对话框
const handleDetail1 = (record) => {
  console.log(record);
  currentRecord.value = record;
  detailModalVisible.value = true;
}

// 关闭账号详情对话框
const handleCloseModal = () => {
  detailModalVisible.value = false;
}

// 订单详情对话框状态
const orderDetailModalVisible = ref(false);
const currentOrderRecord = ref({});

// 打开订单详情对话框
const handleDetail2 = (record) => {
  console.log(record);
  currentOrderRecord.value = record;
  orderDetailModalVisible.value = true;
}

// 关闭订单详情对话框
const handleCloseOrderModal = () => {
  orderDetailModalVisible.value = false;
}
const DealerUserPageList = async () => {
  const res = await API.DealerUserPageList({
    dealer_idArray: [query.value.id],
    current: pagination1.value.current,
    pageSize: pagination1.value.pageSize,
  });
  pagination1.value.total = res.total
  console.log(res.data, 'resdata')
  tableData1.value = res.data
}
const OrderContractPagedList = async () => {
  const res = await API.OrderContractPagedList({args:{
    dealer_idArray: [query.value.id],
    current: pagination2.value.current,
    pageSize: pagination2.value.pageSize,
  }});
  pagination2.value.total = res.total
  tableData2.value = res.data
}
</script>
<style scoped>
.detail-wrapper {
  padding: 20px;
}

.detail-main {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
}

.detail-column {
  margin-bottom: 20px;
}

.column-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.column-content {
  padding: 10px 0;
}

.table-box {
  margin-top: 10px;
}

.icon {
  cursor: pointer;
  margin-left: 5px;
  vertical-align: middle;
}

.cell-status-box {
  display: flex;
  align-items: center;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ff4d4f;
  margin-right: 6px;
}

.is-active .status-dot {
  background-color: #52c41a;
}

.status-text {
  font-size: 14px;
}

.modal-content {
  padding: 10px;
}

.link {
  color: #1890ff;
}
</style>
